<template>
  <section class="container">
    <section
      id="subsidy-table"
    >
      <h1>重庆市种粮大户补贴申报表</h1>
      <p class="table-top">
        <span>受理地：{{largeMember.s_a_nam_all}}</span>
        <span>申报编号（系统自动填写）：{{largeMember.apl_bh}}</span>
      </p>
      <div class="subsidy-table">
        <table border="1">
          <colgroup>
            <col
              v-for="item in 24"
              :key="item"
              :style="{ width: `${100/24}%` }"
            />
          </colgroup>
          <tr>
            <td
              rowspan="6"
              colspan="4"
              align="center"
            >基本<br>情况</td>
            <td colspan="4">大户名称(盖章)</td>
            <td
              colspan="6"
              class="value"
            >{{largeMember.big_mb_nam}}</td>
            <td colspan="4">大户类型</td>
            <td
              colspan="6"
              class="value"
            >{{LargeMemberTypeMap.get(largeMember.big_mb_type)}}</td>
            
          </tr>
          <tr>
            <td colspan="4">大户编号</td>
            <td
              colspan="6"
              class="value"
            >{{largeMember.big_mb_id}}</td>
            <td colspan="4">农户身份号/企业社会代码</td>
            <td
              colspan="6"
              class="value"
            >{{largeMember.big_mb_law_id}}</td>
          </tr>
          <tr>
            <td colspan="4">负责人（签名）</td>
            <td
              colspan="6"
              class="value"
            >{{largeMember.big_mb_user}}</td>
            <td colspan="4">身份证号</td>
            <td
              colspan="6"
              class="value"
            >{{largeMember.big_mb_sfz}}</td>
          </tr>
          <tr>
            <td colspan="4">种粮地点</td>
            <td
              colspan="6"
              class="value"
            >{{largeMember.big_mb_addr}}</td>
            <td colspan="4">联系电话</td>
            <td
              colspan="6"
              class="value"
            >{{ largeMember.big_mb_tel }}</td>
          </tr>
          
          <tr>
            <td colspan="4">银行账户</td>
            <td
              colspan="6"
              class="value"
            >{{largeMember.big_mb_bank_user}}</td>
            <td colspan="4">开户银行</td>
              <td
                colspan="6"
                class="value"
              >{{largeMember.big_mb_bank_name}}</td>
          </tr>
          <tr>
            <td colspan="4">银行账号</td>
            <td
              colspan="6"
              class="value"
            >{{largeMember.big_mb_bank_id}}</td>
            <td colspan="4">申请日期</td>
            <td
              colspan="6"
              class="value"
            >{{largeMember.apl_time}}</td>
          </tr>
          <!-- <tr>
            <td colspan="3">负责人</td>
            <td
              colspan="3"
              class="value"
            >{{ largeMember.big_mb_contact }}</td>
            <td colspan="3">联系电话</td>
            <td
              colspan="3"
              class="value"
            >{{ largeMember.big_mb_tel }}</td>
          </tr>
          <tr>
            <td colspan="3">办公地址</td>
            <td
              colspan="9"
              class="value"
            >{{ largeMember.big_mb_addr }}</td>
          </tr> -->
          <tr>
            <td
              colspan="4"
              rowspan="4"
              align="center"
            >耕地<br>面积</td>
            <td
              colspan="4"
              rowspan="2"
            >承包地（亩）</td>
            <td
              colspan="6"
              align="center"
            >合计</td>
            <td
              colspan="10"
              align="center"
            >其中</td>
          </tr>
          <tr>
            <td
              colspan="6"
              class="value"
            >{{largeMember.field1}}</td>
            <td
              colspan="5"
              class="value"
            >田：{{largeMember.field1_water}}</td>
            <td
              colspan="5"
              class="value"
            >土：{{largeMember.field1_dry}}</td>
          </tr>
          <tr>
            <td
              colspan="4"
              rowspan="2"
            >增加面积（亩）</td>
            <td
              colspan="6"
              align="center"
            >合计</td>
            <td
              colspan="10"
              align="center"
            >其中</td>
          </tr>
          <tr>
            <td
              colspan="6"
              class="value"
            >{{ (+largeMember.field2 - +largeMember.field3) ?  (+largeMember.field2 - +largeMember.field3).toFixed(3) : '' }}</td>
            <td
              colspan="5"
              class="value"
            >田：{{ (+largeMember.field2_water - +largeMember.field3_water) ? (+largeMember.field2_water - +largeMember.field3_water).toFixed(3) : '' }}</td>
            <td
              colspan="5"
              class="value"
            >土：{{ (+largeMember.field2_dry - +largeMember.field3_dry) ? (+largeMember.field2_dry - +largeMember.field3_dry).toFixed(3) : '' }}</td>
          </tr>
          <tr>
            <td
              colspan="12"
            >农资购买金额（元）：{{largeMember.material}}</td>
            <td
              colspan="12"
            >自有农机具数量（台）：{{largeMember.machine}}</td>
          </tr>
          <tr>
            <td align="center" colspan="3">种子</td>
            <td align="center" colspan="3">肥料</td>
            <td align="center" colspan="3">农膜</td>
            <td align="center" colspan="3">农药</td>
            <td align="center" colspan="3">微耕机</td>
            <td align="center" colspan="3">插秧机</td>
            <td align="center" colspan="3">收割机</td>
            <td align="center" colspan="3">灌溉设备</td>
          </tr>
          <tr>
            <td
              colspan="3"
              class="value"
            >{{largeMember.materialdetail ? largeMember.materialdetail.material1 : ''}}</td>
            <td
              colspan="3"
              class="value"
            >{{largeMember.materialdetail ? largeMember.materialdetail.material2 : ''}}</td>
            <td
              colspan="3"
              class="value"
            >{{largeMember.materialdetail ? largeMember.materialdetail.material3 : ''}}</td>
            <td
              colspan="3"
              class="value"
            >{{largeMember.materialdetail ? largeMember.materialdetail.material4 : ''}}</td>
            <td
              colspan="3"
              class="value"
            >{{largeMember.machinedetail ? largeMember.machinedetail.machine1 : ''}}</td>
            <td
              colspan="3"
              class="value"
            >{{largeMember.machinedetail ? largeMember.machinedetail.machine2 : ''}}</td>
            <td
              colspan="3"
              class="value"
            >{{largeMember.machinedetail ? largeMember.machinedetail.machine3 : ''}}</td>
            <td
              colspan="3"
              class="value"
            >{{largeMember.machinedetail ? largeMember.machinedetail.machine4 : ''}}</td>
          </tr>

          <tr>
            <td
              colspan="24"
            >种植粮食面积（亩）：{{largeMember.plant}}</td>
          </tr>

          <tr>
            <td align="center" colspan="2">水稻</td>
            <td align="center" colspan="2">玉米</td>
            <td align="center" colspan="2">小麦</td>
            <td align="center" colspan="2">马铃薯</td>
            <td align="center" colspan="2">红苕</td>
            <td align="center" colspan="2">大豆</td>
            <td align="center" colspan="2">绿豆</td>
            <td align="center" colspan="2">豌胡豆</td>
            <td align="center" colspan="2">高粱</td>
            <td align="center" colspan="2">荞麦</td>
            <td align="center" colspan="2">肾豆</td>
            <td align="center" colspan="2">红小豆</td>
          </tr>
          <tr class="plant">
            <td
              colspan="2"
              class="value"
            >{{largeMember.plantdetail ? largeMember.plantdetail.plant1 : ''}}</td>
            <td
              colspan="2"
              class="value"
            >{{largeMember.plantdetail ? largeMember.plantdetail.plant2 : ''}}</td>
            <td
              colspan="2"
              class="value"
            >{{largeMember.plantdetail ? largeMember.plantdetail.plant3 : ''}}</td>
            <td
              colspan="2"
              class="value"
            >{{largeMember.plantdetail ? largeMember.plantdetail.plant4 : ''}}</td>
            <td
              colspan="2"
              class="value"
            >{{largeMember.plantdetail ? largeMember.plantdetail.plant5 : ''}}</td>
            <td
              colspan="2"
              class="value"
            >{{largeMember.plantdetail ? largeMember.plantdetail.plant6 : ''}}</td>
            <td
              colspan="2"
              class="value"
            >{{largeMember.plantdetail ? largeMember.plantdetail.plant7 : ''}}</td>
            <td
              colspan="2"
              class="value"
            >{{largeMember.plantdetail ? largeMember.plantdetail.plant8 : ''}}</td>
            <td
              colspan="2"
              class="value"
            >{{largeMember.plantdetail ? largeMember.plantdetail.plant9 : ''}}</td>
            <td
              colspan="2"
              class="value"
            >{{largeMember.plantdetail ? largeMember.plantdetail.plant10 : ''}}</td>
            <td
              colspan="2"
              class="value"
            >{{largeMember.plantdetail ? largeMember.plantdetail.plant11 : ''}}</td>
            <td
              colspan="2"
              class="value"
            >{{largeMember.plantdetail ? largeMember.plantdetail.plant12 : ''}}</td>
          </tr>
          <tr>
            <td
              colspan="24"
              class="value"
            >合计：{{largeMember.plant}}</td>
          </tr>
          <tr>
            <td
              colspan="12"
              class="value idea"
            >
              <div class="village">
                <p class="idea-content">村委会审核意见：<span>{{reviewMap.get(largeMember.big_mb_ck2)}}</span></p>
                <p class="sign">村委会负责人签字：{{largeMember.big_mb_ck_u2}}</p>
                <p class="datetime">日期：{{largeMember.big_mb_time2}}</p>
              </div>
            </td>
            <td
              colspan="12"
              class="value idea"
            >
              <div class="village">
                <p class="idea-content">驻村干部审核意见：<span>{{reviewMap.get(largeMember.big_mb_ck3)}}</span></p>
                <p class="sign">驻村干部组长签字：{{largeMember.big_mb_ck_u3}}</p>
                <p class="datetime">日期：{{largeMember.big_mb_time3}}</p>
              </div>
            </td>
            
          </tr>
          <tr>
            <td
              colspan="12"
              class="value idea"
            >
              <div class="town">
                <p class="seal">乡镇核查意见（盖章）</p>
                <p class="area">乡镇核查面积（亩）：{{largeMember.big_mb_ck1}}</p>
                <p class="sign">主要负责人签字：{{largeMember.big_mb_ck_u1}}</p>
                <p class="datetime">日期：{{largeMember.big_mb_time1}}</p>
              </div>
            </td>
            <td
              colspan="12"
              class="value idea"
            >
              <div class="district">
                <p class="seal">区县核查意见（盖章）</p>
                <p class="area">区县核定补贴面积（亩）：{{largeMember.big_mb_ck}}</p>
                <p class="sign">区县负责人签字：{{largeMember.big_mb_ck_u}}</p>
                <p class="datetime">日期：{{largeMember.big_mb_time}}</p>
              </div>
            </td>
          </tr>
        </table>
      </div>
      <p>本表一式打印填报两份，一份报乡镇审核，一份由乡镇报区县农业行政主管部门。</p>
    </section>
  </section>

</template>

<script>
// 演示如何使用 this.$dialog 封装 modal 组件
import { largeMemberServices } from '@/common/services/largeMember'
import { LargeMemberTypeMap, reviewMap } from '@/common/enum'
import { merge, cloneDeep } from 'lodash-es'

const _default = {
  apl_bh: '',
  apl_time: '',
  s_a_nam_all: '',
  big_mb_id: '',
  big_mb_nam: '',
  big_mb_type: '',
  big_mb_law_id: '',
  big_mb_bank_name: '',
  big_mb_bank_code: '',
  big_mb_bank_user: '',
  big_mb_bank_id: '',
  big_mb_contact: '',
  big_mb_tel: '',
  big_mb_user: '',
  big_mb_sfz: '',
  big_mb_addr: '',
  field: '',
  field1: '',
  field1_dry: '',
  field1_water: '',
  field2_water: '',
  field2_dry: '',
  field2: '',
  field3_water: '',
  field3_dry: '',
  field3: '',
  field_had: '',
  field_had_water: '',
  field_had_dry: '',
  field_gave: '',
  field_gave_water: '',
  field_gave_dry: '',
  plant: '',
  plantdetail: {
    plant1: "",
    plant2: "",
    plant3: "",
    plant4: "",
    plant5: "",
    plant6: "",
    plant7: "",
    plant8: "",
    plant9: "",
    plant10: "",
    plant11: "",
    plant12: "",
  },
  machine: '',
  machinedetail: {
    machine1: '',
    machine2: '',
    machine3: '',
    machine4: '',
  },
  material: '',
  materialdetail: {
    material1: "",
    material2: "",
    material3: "",
    material4: "",
  },
  big_mb_ck: "",
  big_mb_ck1: "",
  big_mb_ck2: "",
  big_mb_ck3: "",
  big_mb_ck_u: "",
  big_mb_ck_u1: "",
  big_mb_ck_u2: "",
  big_mb_ck_u3: "",
  big_mb_time: "",
  big_mb_time1: "",
  big_mb_time2: "",
  big_mb_time3: ""
}

export default {
  name: 'StandardList',
  props: {
    currentRow: {
      type: Object,
      default: () => {}
    }
  },
  components: {
  },
  data () {
    return {
      largeMember: cloneDeep(_default),
    }
  },
  computed: {
    LargeMemberTypeMap () {
      return LargeMemberTypeMap
    },
    reviewMap() {
      return reviewMap
    }
  },
  mounted () {
    console.log(this.currentRow)
  },
  watch: {
    'currentRow': {
      immediate: true,
      handler () {
        console.log('currentRow =>', this.currentRow)
        this.initPreview()
      }
    }
  },
  methods: {
    initPreview () {
      if (!this.currentRow.big_mb_id) {
        this.largeMember = merge(this.largeMember, _default)
        return
      }
      largeMemberServices.getLargeMemberPreview(this.currentRow).then(res => {
        merge(this.largeMember, res.data || {})
      })
    },

    handlerTreeSelect (data) {
      
      this.currentAreaId = data.s_a_id
    },
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
}
.subsidy-table {
  display: grid;
  width: 794px;
  margin: 5px auto;
}
#subsidy-table {
  margin-top: 0px;
}
h1 {
  text-align: center;
  font-size: 30px;
  margin-top: 0px;
  height: 80px;
  line-height: 80px;
  width: 100%;
}
.table-top {
  display: flex;
  margin: 20px 0 10px 0;
  span {
    flex: 1;
  }
}
table {
  table-layout:fixed;
  width: 100%;
  tr td {
    border: 1px solid #ccc;
    padding: 10px;
    min-height: 24px;
    // background-color: #efefef;
    font-weight: bold;
  }
  .value {
    background-color: #fff;
    font-weight: normal;
    color: #666;
    height: 42px;
    min-height: 42px;
    word-wrap:break-word;
  }
  .plant {
    td {
    }
  }
  .idea {
    > div {
      display: flex;
      height: 100%;
      width: 100%;
      flex-direction: column;
      justify-content: space-between;
      .datetime, .sign {
        flex: none;
        text-indent: 10em;
        margin-bottom: 5px;
      }
      .area {
        flex: auto;
        text-indent: 0;
        margin-top: 10px;
      }
    }
    .idea-content {
      span {
        position: relative;
        top: 20px;
      }
    }
    .village .idea-content {
      flex: auto;
    }
    height: 160px;
  }
}

// 打印页设置
@media print {
  @page {
    size:  auto;   /* auto is the initial value */
    margin: 5mm 10mm 5mm 10mm;  /* this affects the margin in the printer settings */
  }
  .container
  {
    padding: 10mm 15mm 10mm 15mm; /* margin you want for the content */
    box-sizing: border-box;
  }
}

</style>
